<template>
	<view class="followPlayer">
		<video 
		id="myVideo" 
		class="video" 
		objectFit="cover" 
		loop="true" 
		:src="'http://localhost:8099/video/'+item.src"  
		:controls="false"
		@click="toPlayer(list)"
		>
		<cover-view class="iconfont icon-zanting" @click="autoPlay" :class="{icon:Play==false}"></cover-view>
		<!-- <cover-view class="iconfont icon-ico_zanting_xuanzhong icon"></cover-view> -->
		</video>
	</view>
</template>

<script>
	export default {
		props:['item','itemId','list'],
		name:"followPlayer",
		data() {
			return {
				Play:false,
			};
		},
		onReady(){
			this.videoContext=uni.createVideoContext('myVideo',this);
			if(this.itemId==0){
				this.play();
			}
		},
		methods:{
			play(){
				if(this.Play===false){
					this.videoContext.play();
				}
				this.Play=true;
			},
			pause(){
				if(this.Play===true){
					this.videoContext.pause();
				}
				this.Play=false;
			},
			autoPlay(){
				if(this.Play===false){
					this.videoContext.play();
					this.Play=true;
				}else{
					this.videoContext.pause();
					this.Play=false;
				}
			},
			toPlayer(res){
				uni.setStorage({
					key:'videoList',
					data:res
				})
				uni.navigateTo({
					url:"/pages/player/player"
				})
			}
		}
	}
</script>

<style>
.followPlayer{
	height: 100%;
	width: 100%;
}
.video{
	width: 80%;
	height: 100%;
	z-index: 19;
	position:relative;
}
.icon{
	position:absolute;
	font-size: 55px;
	bottom: 44%;
	left: 40%;
	color:#fff;
}
</style>
